<template>
  <Header :title="title"></Header>
  <van-cell-group style="margin-bottom:10px">
    <van-cell title="当前学期" style="text-align: left;line-height: 3;padding: 0 5%;color: #9a9b9d">
      <van-dropdown-menu active-color="#45a5d3" class="dropdownOne">
        <van-dropdown-item v-model="year" :options="years" @change="initData()"/>
      </van-dropdown-menu>
      <van-dropdown-menu active-color="#45a5d3" class="dropdownTwo">
        <van-dropdown-item v-model="term" :options="terms" @change="initData() "/>
      </van-dropdown-menu>
    </van-cell>
  </van-cell-group>
  <div v-if="show" style="text-align: center;margin-top: 50px">
    <p>无当前学期成绩</p>
  </div>
  <van-cell-group v-else style="margin-bottom:24px " v-for="(course,index) in gradeList" :key="index">
    <van-cell center icon="/src/image/grade_icon.png"
              class="titleStyle"
              style="line-height: 2.5;">
       <span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;padding-left: 1vw ">
        {{ course.courseName }}
      </span>
    </van-cell>
    <van-cell center title="学分" style="line-height:1.2;color: #9a9b9d">
      <span style="color: black">
        {{ course.pointScore }}
      </span>
    </van-cell>
    <van-cell center title="分数" style="line-height:1.2;color: #9a9b9d">
      <span style="color: black">
        {{ course.score }}
      </span>
    </van-cell>
    <van-cell center title="考核方式" style="line-height:1.2;color: #9a9b9d">
    <span style="color: black">
        {{ course.checkWay }}
      </span>
    </van-cell>
    <van-cell center title="考试性质" style="line-height:1.2;color: #9a9b9d">
    <span style="color: black">
        {{ course.scoreTypeDesc }}
    </span>
    </van-cell>
  </van-cell-group>


</template>
<script>
import {onMounted} from "vue";
import {getStudGrade} from "/@/api/getStudGrade";
import axios from "axios";

export default {
  setup() {
    const data = reactive({
      title: "学生成绩",
      gradeList: null,
      year: null,
      term: null,
      show: false,
      years: [],
      terms: [],
    });

    const getYear = () => {
      const object = JSON.parse(localStorage.getItem('USERINFO'));
      return object.gradeYear;
      // return new Date().getFullYear();
    };
    const getTerm = () => {
      let currentMonth = new Date().getMonth();
      // if (currentMonth >= 2 && currentMonth <= 7) {
      //   // data.term = 0;
      //   return 0;
      // } else {
      //   // data.term = 1;
      //   return 1;
      // }
      const object = JSON.parse(localStorage.getItem('USERINFO'));
      return parseInt(object.gradeTerm);
    };

    const initYears = () => {
      data.year = getYear();
      data.years.push({text: String(data.year), value: data.year});
      data.years.push({text: String(data.year - 1), value: data.year - 1});
      data.years.push({text: String(data.year - 2), value: data.year - 2});
      data.years.push({text: String(data.year - 3), value: data.year - 3});
      // console.log(data.years)
    };

    const initTerms = () => {
      data.term = getTerm();
      data.terms.push({text: '春', value: 0});
      data.terms.push({text: '秋', value: 1});
      // console.log(data.terms)
    };
    const initData = async () => {
      await getStudGrade(data.year,data.term).then(res=>{
        // console.log("222111",res.response._value.extend );
        data.gradeList =res.response.value.extend.gradeData.gradeList;
        console.log("222",data.gradeList );
        if (!data.gradeList)
          data.show = true;
        else
          data.show = false;
      })
    };


    onMounted(() => {
      getYear();
      getTerm();
      initTerms();
      initYears();
      initData();
    });

    return {
      ...toRefs(data),
      getTerm,
      getYear,
      initData,
    }
  },

}
</script>
<style scoped>
>>> .van-icon__image {
  transform: scale(1.5); /* 将图标放大到原来的1.5倍大小 */
  height: 100%;
}

>>> .van-dropdown-menu__bar {
  --van-dropdown-menu-box-shadow: 0 0 0 0;
}

>>> .van-dropdown-menu__title {
  color: #45a5d3;

}


>>> .van-cell__value {
  display: flex;
  justify-content: space-around;
}

>>> .van-popup--top {
  width: 15%;

}

>>> .van-popup--top .van-cell {
  padding: 0;
}

>>> .van-overlay {
  width: 0;
  height: 0;
}

>>> .dropdownOne .van-popup--top {
  left: 58%;
  box-shadow: 3px 5px 10px grey;

}

>>> .dropdownTwo .van-popup--top {
  left: 83%;
  box-shadow: 3px 5px 10px grey;
}

>>> .titleStyle .van-cell__value {
  justify-content: left
}

</style>
